/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, Table, TableRow, TableBody, Cell, useTheme, Button,
} from "customize-easy-ui-component";
import {
    InspectRecordLayout, InternalItemProps, useInputControlSure,
} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {tableSetInp} from "../../../common/tool";
import {TailMenRowIspCheck} from "../../contain/rarelyVary";
import queryString from "query-string";
import {EditStorageContext} from "../../StorageContext";
import {useUppyUploadM} from "../../hook/useUppyUploadM";
import {DirectLink, Link as RouterLink} from "../../../routing/Link";
import {useFoldForList, useFoldGenerate, useSplitSubCapacity} from "../../hook/useMainRepUrlOr";

//附页：（电站锅炉内部检验联络单或意见书反馈）.pdf
//【特殊性】类似可重复的分项报告的做法， 可是没有使用独立分项报告的框架！原始记录跟随主报告的且只能显示出第一个块内容。缺点：setInp嵌套对象层次太深了！getInpFilter提取整个table;
//【权衡】考虑，若该子报告真的没有用到表格数组的录入编辑情形的就可以用这种模式。后者还是考虑走通常的分项报告框架模式吧。

export interface Props extends InternalItemProps {
    table: string;
    iAname?: string[];
    datalist?: string[];
    /**编辑器组件可自定义的
     * @param dxtix : 同一个重复分项的序号；
     * @param refWidth : 编辑器的 px 宽度；
     * */
    editAs?: (inp:any, setInp:React.Dispatch<React.SetStateAction<any>>, dxtix:number,refWidth?:number) => React.ReactNode;
}

//一张图一页！  只能支持一个图片的:单线图也是一个位置一张图，useUppyUploadM()不支持上传多张图！
//假如子报告这里面：还需要录入表格的情况+再叠加上遭遇“可重复分项性质”情况：下面Input组件tableSetInp(table, dxtix, inp, setInp, 'til'就不好处理桥套的表格存储。此方式简单可以，遇到表格就不能干了。
//【所以】还是用类似独立流转分项的用的<InspectRecordLayout组件做编辑器裹挟redId={redId} nestMd={nestMd}参数框架后，再处理就简单多：但缺点getInpFilter只能针对当一个分项，主报告data无法提取出！

//【非常特殊的】 实际名字 是在<DrawingsExplan table={'联络单'} 注入的； @ 唯一性检查！
//需要管理对象页面，可多次上传的（不是一次性上传几个图），采用useUppyUploadM。
export const itemA联络附页=[ ];
export const DrawingsExplan=
    React.forwardRef(({ children, show ,alone=true,redId,nestMd,refWidth,rep,table,label,editAs}:Props,  ref
    ) => {
        const theme= useTheme();
        const qs= queryString.parse(window.location.search);
        const dxtix =Number(qs?.dxtix) || 0;
        const {modified,setModified,} =React.useContext(EditStorageContext) as any;
        const itemA = React.useMemo(() => {
            return [ table,  ...itemA联络附页];
        }, [ table]);
        const [getInpFilter]=useMeasureInpFilter(null,itemA,);
        const {inp, setInp,onSure} = useInputControlSure({ ref,redId,nestMd });
        const dxtSize= inp?.[table]?.length || 0;
        const row=undefined===inp?.[table]?.[dxtix]? dxtSize : dxtix;
        const onFinish = React.useCallback(async(forRow:number, upfile: any, del:boolean) => {
            if(inp){
                tableSetInp(table, row, inp, onSure, '_FILE_', (del? undefined : upfile), del);
                !modified && setModified(true);
            }
        }, [row, inp, modified,table,onSure,setModified]);
        const [uploadDom]=useUppyUploadM({repId:rep?.id, table:table,
            row: row,  inp, setInp, onFinish, liveDays:1});

        return (
            <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                                 alone={alone} label={`${label}${dxtix + 1}的管理`}>
                <Text variant="h5">
                  {label}，序号 {dxtix + 1}：
                </Text>
                {editAs && editAs!(inp,setInp,dxtix,refWidth) }
                {children}
                <hr/>
                {label} 附页附图的上传：
                {uploadDom}
                { !(inp?.[table]?.[row]?._FILE_?.url) &&
                    <Text variant="h5">
                        没有上传的文件，想要：
                        <Button intent="danger"
                                onPress={async () => {
                                    // inp?.部图表?.splice(delNo! - 1, delSize);
                                    tableSetInp(table, row, inp, onSure, '_FILE_', undefined ,true);
                                    // setInp({...inp, 部图表: inp?.部图表,});      //等效setInp({...inp})
                                }}
                        >执行管理对象的删除</Button>，然后自行离开本界面，返回。
                    </Text>
                }
            </InspectRecordLayout>
        );
    });

export interface DrawingsExplanVwProps{
    orc: any;
    rep: any;
    children?: React.ReactNode;
    table: string;
    //折叠标签的名称：
    title: string;
    //可替换标题区域显示：
    head?: (dxtix:number) => React.ReactNode;
    /**图片上面的：可自定义的显示部分
     * @param dxtix : 同一个重复分项的序号 -1；
     * */
    descCB?: (dxtix:number) => React.ReactNode;
    //布局安排：若是一整张纸张显示的就需要设置 差额=预留页首和页尾巴的高度部分。带CSS单位 ’6.5rem‘确保不会超出一页的。调整"h2" calc(100vh - ？)。
    reserve?: string;
    //可修改tag ID的关联；
    hash?: string;
}
/**编辑器组件可自定义的： 【局限性】只能支持一个图片的。
 * @param dxtix : 同一个重复分项的序号；
 * @param refWidth : 编辑器的 px 宽度；
 *注入例子  const descCB=(dxtix:number) =>{ return <>说明，{orc?.联络单?.[dxtix]?.til} 用处：</> };
 *  const head=(dxtix:number) =><> <Text </Text> <div </div> </>
 * */
export const DrawingsExplanVw= ({ orc, rep, children,table,title,head,descCB,reserve,hash}: DrawingsExplanVwProps
) => {
    const theme= useTheme();
    const sizeDg=orc?.[table]?.length || 0;
    const lsBlockMax=useSplitSubCapacity(sizeDg,8);        //以8张图为一个折叠区组合的。 实际图序号计算 =折叠区序号 * 8 +偏移量。
    const {sumArea, areaContent, btnBindUses}=useFoldForList(orc?.[table], lsBlockMax,false);
    const callback = (dlPage: any, arak:number, pid:number) => {
        const aIdx= arak * lsBlockMax + pid;      //在总体列表中的顺序号。
        return <div key={aIdx} css={{"@media not print": {marginTop: '1rem', marginBottom: '1rem'},}}>
            <div css={{"@media print": {height: '100vh', overflowY: 'hidden',}}}>
                <DirectLink href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/DrawingsExplan#DrawingsExplan`}>
                    { head? head(aIdx)
                        :
                      <>
                        <Text variant="h3" css={{textAlign: 'center', marginTop: '1rem', "@media print": {pageBreakBefore: 'always', marginTop: 'unset',},
                        }}>{orc?.[table]?.[aIdx]?.til ?? '管道'}</Text>
                        <div css={{display: 'flex', justifyContent: 'space-between'}}>
                            <Text>序号：{aIdx + 1}</Text>
                            <Text>报告编号：{rep.isp.no}</Text>
                        </div>
                      </>
                    }
                </DirectLink>
                <Table fixed={["62%", "%"]} css={{
                    borderCollapse: 'collapse', "@media print": {minHeight: reserve ? `calc(100vh - ${reserve})` : undefined}
                            }} tight miniw={800}>
                    <TableBody>
                        <DirectLink
                            href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/DrawingsExplan?dxtix=` + aIdx + `#DrawingsExplan`}>
                            <TableRow>
                                <Cell colSpan={2} css={{
                                    "@media print": {
                                        height: '-webkit-fill-available',
                                        pageBreakInside: 'avoid'
                                    }, padding: 0,
                                }}>
                                    { descCB && descCB(aIdx) }
                                    <div css={{display: 'flex', justifyContent: 'space-around', alignItems: 'center',
                                             "@media print": {
                                                marginTop: '1px', marginRight: '1px', marginBottom: '1px',
                                                minHeight: reserve? '65vh':undefined
                                             },
                                        }}>
                                        {orc?.[table]?.[aIdx]?._FILE_?.url &&
                                            <img src={process.env.REACT_APP_OSS_ENDP + orc?.[table]?.[aIdx]?._FILE_?.url}
                                                 alt={orc?.[table]?.[aIdx]?._FILE_?.url}
                                                 css={{
                                                     maxHeight: '14cm',
                                                     maxWidth: '-webkit-fill-available',
                                                     [theme.mediaQueries.lg]: {maxHeight: '18cm', maxWidth: undefined},
                                                     "@media print": {maxHeight: '86vh', maxWidth: '100%'},
                                                 }}
                                            />
                                        }
                                    </div>
                                </Cell>
                            </TableRow>
                        </DirectLink>
                    </TableBody>
                </Table>
                <TailMenRowIspCheck orc={orc} rep={rep} href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}>
                </TailMenRowIspCheck>
            </div>
        </div>
    }

    const [renderAll]=useFoldGenerate({sumArea,btnBindUses,areaContent, callback,mark:title+'折叠'});
    const dxtNext= (orc?.[table]?.length || 0);
    return <>
        {sizeDg <= 0 &&
            <RouterLink href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/DrawingsExplan#DrawingsExplan`}>
                <Text  variant="h4" css={{
                    textAlign: 'center', marginTop: '1rem', "@media print": {display: 'none',},
                }}>{title}-附图附件的上传</Text>
            </RouterLink>
        }
        <div id={hash??"DrawingsExplan"}/>
        {renderAll}
        <RouterLink href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/DrawingsExplan?dxtix=${dxtNext}#DrawingsExplan`}>
            <Text variant="h4" css={{
                textAlign: 'center', "@media print": {display: 'none',},
            }}>新增加 {title}</Text>
        </RouterLink>
    </>;
};

/*底下的适应性不好：小屏幕：可能超出宽度
<BlobInputList value={inp?.[table]?.[dxtix]?.til || ''} datalist={datalist}
               css={{display: 'inline-flex', minWidth: '100%', width:'unset',
                   [theme.mediaQueries.md]: {minWidth: 'unset', width:'25rem'},
               }} rows={2}
               onListChange={v => tableSetInp(table, dxtix, inp, setInp, 'til', v || undefined)}/>
* */
